<template>
  <div class="container">
    <div class="h70"></div>
    <div class="wrap_info">
      <div class="wrap">
        <div class="wrap_words" @tap="popup">
          <span>{{date.year}}年{{date.month}}月度业绩走势</span>
          <i v-show="userInfo.floor === 0" class="select_shop"></i>
        </div>
        <div class="wrap_shop">- {{ userInfo.departmentname }} -</div>
        <canvas canvas-id="lineCanvas" disable-scroll="true" class="canvas" @touchstart="touchHandler" :style="[{position: 'fixed',right: distance }]"></canvas>
        <div class="total flex press" @tap="todataview">
          <span class="total_words flex-item">
            <i class="total_icon"></i>业绩数据总览
          </span>
          <span class="grey_arrow"></span>
        </div>
      </div>
      <div class="menu">
        <div class="bigtitle">
          <span class="shu"></span>今日实时数据
        </div>
        <ul class="menu_ul" v-if="userInfo.floor == 3 && userInfo.ismanage == 0">
          <li @tap="navigateTo" data-url="/pages/worker/todayservice/todayservice">
            <div class="words">今日已服务 {{ todayinfo.comenum }}/{{ todayinfo.basenum }}/规划客数</div>
            <view class="progress-item">
              <span class="progress cur">
                <i v-bind:style="{ width: todayper.servicewidth }">
                  <span class="persent">{{ todayper.service }}</span>
                </i>
              </span>
            </view>
          </li>
          <li @tap="notopen">
            <div class="words">今日预约到店 {{ todayinfo.bespeakarrive }}/{{ todayinfo.bespeaknum }}/预约客数</div>
            <view class="progress-item">
              <span class="progress cur">
                <i v-bind:style="{ width: todayper.appointwidth }">
                  <span class="persent">{{ todayper.appoint }}</span>
                </i>
              </span>
            </view>
          </li>
          <li @tap="navigateTo" data-url="/pages/worker/cashyejidata/cashyejidata">
            <div class="words">今日现金业绩 {{ todayinfo.xianjin }}/{{ todayinfo.planfeat }}/规划业绩</div>
            <view class="progress-item">
              <span class="progress cur">
                <i v-bind:style="{ width: todayper.xjyjwidth }">
                  <span class="persent">{{ todayper.xjyj }}</span>
                </i>
              </span>
            </view>
          </li>
          <li @tap="navigateTo" data-url="/pages/worker/cardyejidata/cardyejidata">
            <div class="words">今日卡耗业绩 {{ todayinfo.kahao }}</div>
            <view class="progress-item">
              <span class="progress cur">
                <i style="width:100%;">
                  <span class="persent">¥{{ todayinfo.kahao }}</span>
                </i>
              </span>
            </view>
          </li>
        </ul>
        <ul class="menu_ul" v-else>
          <li @tap="navigateTo2" data-url="/pages/worker/employeeCheck/employeeCheck">
            <div class="words">今日上班员工 {{ todayinfo.worknum }}/{{ todayinfo.allworknum }}</div>
            <view class="progress-item">
              <span class="progress cur">
                <i v-bind:style="{ width: todayper.workwidth }">
                  <span class="persent">{{ todayper.work }}</span>
                </i>
              </span>
            </view>
          </li>
          <li @tap="navigateTo2" data-url="/pages/worker/todaysale/todaysale">
            <div class="words">今日出单员工 {{ todayinfo.ablenum }}/{{ todayinfo.allworknum }}</div>
            <view class="progress-item">
              <span class="progress cur">
                <i v-bind:style="{ width: todayper.ablewidth }">
                  <span class="persent">{{ todayper.able }}</span>
                </i>
              </span>
            </view>
          </li>
          <li @tap="navigateTo" data-url="/pages/worker/todayservice/todayservice">
            <div class="words">今日已服务 {{ todayinfo.comenum }}/{{ todayinfo.basenum }}/规划客数</div>
            <view class="progress-item">
              <span class="progress cur">
                <i v-bind:style="{ width: todayper.servicewidth }">
                  <span class="persent">{{ todayper.service }}</span>
                </i>
              </span>
            </view>
          </li>
          <li @tap="notopen">
            <div class="words">今日预约到店 {{ todayinfo.bespeakarrive }}/{{ todayinfo.bespeaknum }}/预约客数</div>
            <view class="progress-item">
              <span class="progress cur">
                <i v-bind:style="{ width: todayper.appointwidth }">
                  <span class="persent">{{ todayper.appoint }}</span>
                </i>
              </span>
            </view>
          </li>
          <li @tap="navigateTo" data-url="/pages/worker/cashyejidata/cashyejidata">
            <div class="words">今日现金业绩 {{ todayinfo.xianjin }}/{{ todayinfo.planfeat }}/规划业绩</div>
            <view class="progress-item">
              <span class="progress cur">
                <i v-bind:style="{ width: todayper.xjyjwidth }">
                  <span class="persent">{{ todayper.xjyj }}</span>
                </i>
              </span>
            </view>
          </li>
          <li @tap="navigateTo" data-url="/pages/worker/cardyejidata/cardyejidata">
            <div class="words">今日卡耗业绩 {{ todayinfo.kahaowidth }}</div>
            <view class="progress-item">
              <span class="progress cur">
                <i style="width:100%;">
                  <span class="persent">¥{{ todayinfo.kahao }}</span>
                </i>
              </span>
            </view>
          </li>
        </ul>
      </div>
    </div>
    <van-popup :show="show" :close-on-click-overlay="true" custom-style="background:#fff;height: 100%;width: 70%;" position="right" :overlay="true" @close="onClose">
      <div class="select_title flex">
        <span>选择门店</span>
      </div>
      <div class="select_subtitle flex">
        <span>管理权限: {{shoplist.length}}家</span>
      </div>
      <div class="select_body">
        <div @tap="switchshop(0,0)">
          <i class="all_shop"></i>
          <span>所有门店</span>
        </div>
        <div v-for="(item,index) in shoplist" :key="index" @tap="switchshop(item.id,item.name)">
          <i class="shop"></i>
          <span>{{item.name}}</span>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import api from '@/utils/api'
import wxCharts from '@/utils/wxcharts'
import wx from 'wx'
import Toast from '@/utils/toast'
let lineChart = null;
export default {
  data () {
    return {
      date: {
        year: '',
        month: ''
      },
      userInfo: {
        user_id: '',
        floor: '',
        ismanage: '',
        orcode: '',
        jsonshop: '',
        departmentid: '',
        departmentname: '',
        datatype: 1
      },
      todayinfo: {},
      todayper: {
        work: '',
        able: '',
        service: '',
        appoint: '',
        xjyj: ''
      },
      shoplist: [],
      show: false,
      distance: '0'
    }
  },
  async onShow () {
    let that = this
    await Promise.all([
      that.getbasedata(),
      that.getsystemdongtai(),
      that.getindexdongtai(),
      that.getmyjsonshoplist()
    ])
  },
  methods: {
    initChart (daysdata, xianjindata, kahaodata) {
      /* eslint-disable */
      let windowWidth = 320
      try {
        const res = wx.getSystemInfoSync()
        const clientWidth = res.windowWidth
        const rpxR = 750 / clientWidth
        windowWidth = 688 / rpxR
      } catch (e) {
        console.error('getSystemInfoSync failed!');
      }
      lineChart = new wxCharts({
        canvasId: 'lineCanvas',
        type: 'line',
        categories: daysdata,
        animation: true,
        series: [{
          name: '现金业绩',
          data: xianjindata,
          format: function (val, name) {
            return val.toFixed(2) + '元';
          }
        }, {
          name: '卡耗业绩',
          data: kahaodata,
          format: function (val, name) {
            return val.toFixed(2) + '元';
          }
        }],
        xAxis: {
          disableGrid: true
        },
        yAxis: {
          disabled: true
        },
        width: windowWidth,
        height: windowWidth / 1.72,
        dataLabel: false,
        dataPointShape: true,
        extra: {
          lineStyle: 'curve'
        }
      });
    },
    touchHandler (e) {
      lineChart.showToolTip(e, {
        // background: '#7cb5ec',
        format: function (item, category) {
          return category + ' ' + item.name + ':' + item.data
        }
      });
    },
    // createSimulationData () {
    //   var categories = [];
    //   var data = [];
    //   for (var i = 0; i < 10; i++) {
    //     categories.push('2016-' + (i + 1));
    //     data.push(Math.random() * (20 - 10) + 10);
    //   }
    //   // data[4] = null;
    //   return {
    //     categories: categories,
    //     data: data
    //   }
    // },
    per (a, b) {
      let pernum = ''
      if (b !== 0) {
        pernum = Math.ceil(a / b * 100) + '%';
      } else {
        if (b === 0 && a !== 0) {
          pernum = '100%'
        } else {
          pernum = '0%'
        }
      }
      return pernum
    },
    perwidth (width) {
      width = parseInt(width) <= 6 ? '0%' : width
      return width
    },
    async getbasedata () {
      const that = this
      const date = new Date()
      const userInfo = wx.getStorageSync('userInfo')
      Object.keys(that.userInfo).forEach(e => {
        if (e !== 'datatype') {
          that.userInfo[e] = userInfo[e]
        }
      })
      that.date.year = date.getFullYear()
      that.date.month = date.getMonth() + 1
    },
    async getsystemdongtai () {
      const res = await api.getsystemdongtai(this.userInfo);
      if (res.code === '100') {
        let yejiInfo = {}
        let daysdata = []
        let xianjindata = []
        let kahaodata = []
        res.data.forEach(e => {
          yejiInfo[e.day] = { 'xianjinyeji': e.xianjinyeji, 'kahaoyeji': e.kahaoyeji }
        })
        for (let i = 0; i < new Date().getDate(); i++) {
          daysdata.push(i + 1 + '号')
          if (yejiInfo[i + 1]) {
            xianjindata.push(yejiInfo[i + 1].xianjinyeji)
            kahaodata.push(yejiInfo[i + 1].kahaoyeji)
          } else {
            xianjindata.push(0)
            kahaodata.push(0)
          }
        }
        this.initChart(daysdata, xianjindata, kahaodata);
      }
    },
    async getindexdongtai () {
      const that = this
      const res = await api.getindexdongtai(that.userInfo)
      const data = res.data
      that.todayper.work = that.per(data.worknum, data.allworknum)
      that.todayper.workwidth = that.perwidth(that.todayper.work)
      that.todayper.able = that.per(data.ablenum, data.allworknum)
      that.todayper.ablewidth = that.perwidth(that.todayper.able)
      that.todayper.service = that.per(data.comenum, data.basenum)
      that.todayper.servicewidth = that.perwidth(that.todayper.service)
      that.todayper.appoint = that.per(data.bespeakarrive, data.bespeaknum)
      that.todayper.appointwidth = that.perwidth(that.todayper.appoint)
      that.todayper.xjyj = that.per(data.xianjin, data.planfeat)
      that.todayper.xjyjwidth = that.perwidth(that.todayper.xjyj)
      that.todayinfo = data
    },
    async getmyjsonshoplist () {
      let that = this
      const res = await api.getmyjsonshoplist({ jsonshop: that.userInfo.jsonshop })
      that.shoplist = res.data
    },
    popup () {
      const that = this
      that.show = true
      that.distance = '1000rpx'
    },
    onClose () {
      let that = this
      that.show = false
      setTimeout(() => {
        that.distance = '0'
      }, 300);
    },
    switchshop (id, name) {
      let that = this
      if (id === 0) {
        const userInfo = wx.getStorageSync('userInfo')
        that.userInfo.jsonshop = userInfo['jsonshop']
        that.userInfo.departmentname = userInfo['departmentname']
        that.userInfo.datatype = 1
      } else {
        that.userInfo.jsonshop = id
        that.userInfo.departmentname = name
        that.userInfo.datatype = 2
      }
      that.show = false
      setTimeout(() => {
        that.distance = '0'
      }, 300)
      that.getsystemdongtai()
      that.getindexdongtai()
    },
    performanceData () {
      this.$router.push({ path: '/pages/guest/performanceData/performanceData' })
    },
    navigateTo (e) {
      const that = this
      const dataset = e.mp.currentTarget.dataset
      const path = dataset.url
      that.$router.push({ path: path, query: { jsonshop: that.userInfo.jsonshop } })
    },
    notopen () {
      Toast('暂未开放', 'noicon');
    },
    navigateTo2 (e) {
      const that = this
      const dataset = e.mp.currentTarget.dataset
      const path = dataset.url
      that.$router.push({ path: path, query: { datatype: that.userInfo.datatype, jsonshop: that.userInfo.jsonshop } })
    },
    todataview () {
      const that = this
      that.$router.push({ path: '/pages/dataview/shopdata/shopdata', query: { jsonshop: that.userInfo.jsonshop, departmentname: that.userInfo.departmentname, floor: that.userInfo.floor, ismanage: that.userInfo.ismanage, user_id: that.userInfo.user_id } })
    }
  },
  async onPullDownRefresh () {
    // 请求数据
    let that = this
    await Promise.all([
      that.getbasedata(),
      that.getsystemdongtai(),
      that.getindexdongtai(),
      that.getmyjsonshoplist()
    ])
    wx.stopPullDownRefresh()
  },
}
</script>

<style scoped>
.container {
  background: RGBA(153, 153, 153, 0.1);
}
.h70 {
  width: 100%;
  height: 70rpx;
  background: RGBA(255, 68, 68, 1);
}
.wrap_info {
  position: absolute;
  width: 688rpx;
  left: 50%;
  top: 22rpx;
  transform: translateX(-50%);
}
.wrap {
  width: 100%;
  box-shadow: 0px 6rpx 20rpx rgba(255, 68, 68, 0.1);
  background: #fff;
  border-radius: 24rpx;
  height: 620rpx;
  margin-bottom: 20rpx;
  position: relative;
  /* width: 100%;
  height: 100%; */
}
.wrap_shop {
  font-size: 28rpx;
  font-weight: 400;
  color: rgba(51, 51, 51, 1);
  text-align: center;
}
.container {
  position: relative;
}
.menu {
  width: 100%;
  background: #fff;
  box-shadow: 0px 6rpx 20rpx rgba(255, 68, 68, 0.1);
  border-radius: 24rpx;
  padding: 28rpx 32rpx;
}
.bigtitle {
  font-size: 32rpx;
  font-weight: bold;
  line-height: 42rpx;
  color: rgba(51, 51, 51, 1);
}
.bigtitle .shu {
  display: inline-block;
  width: 4rpx;
  height: 20rpx;
  background: rgba(255, 68, 68, 1);
  border-radius: 2rpx;
  margin-right: 12rpx;
}
.menu_ul {
  width: 100%;
  margin-top: 16rpx;
}
.menu_ul li {
  width: 100%;
}
.menu_ul li .words {
  font-size: 28rpx;
  font-weight: 400;
  color: rgba(102, 102, 102, 1);
  opacity: 1;
  margin-bottom: 18rpx;
}
.progress-item {
  width: 100%;
  margin-bottom: 18rpx;
}
.wrap_words {
  position: relative;
  padding-top: 22rpx;
  width: 100%;
  text-align: center;
  font-size: 32rpx;
  font-weight: 400;
  margin-bottom: 6rpx;
}
.wrap .tip {
  position: absolute;
  top: 184rpx;
  right: 64rpx;
  font-size: 20rpx;
  color: rgba(51, 51, 51, 1);
}
.wrap .tip .xj {
  margin-bottom: 16rpx;
}
.wrap .tip .xj .tip_line {
  position: relative;
  display: inline-block;
  top: -4px;
  margin-right: 11rpx;
  display: inline-block;
  width: 39rpx;
  height: 2rpx;
  background: rgba(255, 68, 68, 1);
}
.wrap .tip .kh .tip_line {
  position: relative;
  display: inline-block;
  top: -4px;
  margin-right: 11rpx;
  display: inline-block;
  width: 39rpx;
  height: 2rpx;
  background: #ffb199;
}
.progress-item {
  width: 100%;
}
.progress-item .progress {
  display: inline-block;
  width: 100%;
  height: 28rpx;
  border-radius: 28rpx;
  background: RGBA(153, 153, 153, 0.1);
  position: relative;
}
.progress-item .progress.cur i {
  position: absolute;
  top: 0;
  left: 0;
  width: 0%;
  height: 28rpx;
  line-height: 28rpx;
  border-radius: 28rpx;
  background: linear-gradient(
    186deg,
    rgba(255, 177, 153, 1) 0%,
    rgba(255, 8, 68, 1) 100%
  );
}
.progress-item .persent {
  position: absolute;
  top: 0;
  right: 6rpx;
  font-size: 20rpx;
  font-weight: 400;
  color: #fff;
  /* color: rgba(255, 68, 68, 1); */
}
.total {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 95rpx;
  font-size: 32rpx;
  font-weight: bold;
  color: rgba(51, 51, 51, 1);
  line-height: 95rpx;
  padding: 0 32rpx;
  border-top: 2rpx solid RGBA(153, 153, 153, 0.2);
}
.press::before {
  border-bottom-left-radius: 24rpx;
  border-bottom-right-radius: 24rpx;
}
.total_icon {
  display: inline-block;
  position: relative;
  top: 4rpx;
  width: 32rpx;
  height: 36rpx;
  background: url(http://mytimg.178mr.com/yeji.png) no-repeat;
  background-size: 100%;
  margin-right: 11rpx;
}
.grey_arrow {
  display: inline-block;
  width: 12rpx;
  height: 28rpx;
  background: url(http://mytimg.178mr.com/grey_arrow.png) no-repeat;
  background-size: 100%;
  position: relative;
}
.select_shop {
  position: absolute;
  top: 32rpx;
  right: 32rpx;
  width: 32rpx;
  height: 24rpx;
  background: url(http://mytimg.178mr.com/select_shop.png) no-repeat;
  background-size: 100%;
}
.select_title {
  height: 80rpx;
  font-size: 32rpx;
  color: rgba(255, 68, 68, 1);
}
.select_subtitle {
  height: 48rpx;
  font-size: 24rpx;
  color: rgba(153, 153, 153, 1);
  background-color: #f5f5f5;
}
.select_body {
  padding-top: 52rpx;
  padding-left: 32rpx;
}
.select_body > div {
  padding-bottom: 52rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28rpx;
  color: rgba(51, 51, 51, 1);
}
.select_body > div span {
  flex: 1;
  padding-left: 22rpx;
}
.all_shop {
  width: 36rpx;
  height: 30rpx;
  background: url(http://mytimg.178mr.com/all_shop.png) no-repeat;
  background-size: 100%;
}
.shop {
  width: 36rpx;
  height: 32rpx;
  background: url(http://mytimg.178mr.com/shop.png) no-repeat;
  background-size: 100%;
}
</style>
<style>
.canvas {
  width: 100%;
  height: 400rpx;
}
</style>